<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../vender/animate@3.5.0.min.css">
    <style>
        .list-complete-item {
            transition: all 1s;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div id="app">
    <my-component></my-component>
</div>


</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<script>


    var app=new Vue({
        el:'#app',

        components:{
          'my-component':{
              template:`<div id="list" class="demo">
                    <input type="text" v-model="query">
                    <transition-group
                        name="list-complete"
                        tag="ul"
                        :css="false"
                        :before-enter="beforeEnter"
                        :enter="enter"
                        :leave="leave"
                    >
                        <li class="list-complete-item"
                            v-for="(item,idx) of computedList"
                            :key="item.msg"
                            :data-index="idx"
                        >
                        {{item.msg}}
                        </li>
                    </transition-group>
                </div>`,
              data:()=>({
                  query:'',
                  list:[
                      {msg:'Bruce Lee'},
                      {msg:'Jackie Chan'},
                      {msg:'Jet Li'},
                      {msg:'Kung Fury'}
                  ]
              }),
            computed:{
                computedList: function () {
                    var vm=this;
                    var list=this.list.filter(item=>item.msg.toLowerCase().indexOf(vm.query.toLowerCase())!==-1);
                    console.log('computedList:',list);
                    return list;
                }
            },
            methods:{
                beforeEnter:function(el){
                    el.style.opacity=0;
                    el.style.height=0;
                },
                enter:function(el,done){
                    var delay=el.dataset.index*150;
                    setTimeout(()=>{
                        Velocity(
                                el,
                                {opacity:1,height:'1.6em'},
                                {complete:done}
                        )
                    },delay);
                },
                leave:function(el,done){
                    var delay=el.dataset.index*150;
                    setTimeout(()=>{
                        Velocity(
                                el,
                                {opacity:0,height:0},
                                {complete:done}
                        )
                    },delay);
                }
            }
          }
        }
    });



</script>
</html>